<template>
	<view class="m-number" :style="[numberStyle]">
		<template v-if="!isHidden">
			<text :style="[p2]" v-if="cny || leftText">{{cny?'￥':leftText}}</text>
			<text :style="[p1]">{{numArr[0]}}</text>
			<text :style="[p2]" v-if="decimals" >.{{decimals}}</text>
			<template v-if="!cny">
				<text :style="[p2]" v-if="numArr[1]" >{{numArr[1]}}</text>
			</template>
		</template>
		<template v-else>
			<text>******</text>
		</template>
		
	</view>
</template>

<script>
	/**
	 * m-number
	 * @description 金额指示器
	 *  property { String } 		unit			右侧文字（单位）
	 *  property { String } 		leftText		左侧文字 
	 *  property { String } 		fill			小数点位数 	默认2  0不显示
	 *  property { Boolean } 		isOmit			是否省略0
	 *  property { Boolean } 		format			千位分割		例：1,000.00
	 *  property { Boolean } 		qe				万位分割		例：1万 1百万
	 *  property { String } 		size			文字大小    34 20则表示主数字和单位大小
	 *  */
	import { array } from '../../libs/fn/verify.js'
	import { formatMoney, numberFormat } from '@/filters/index.js'
	import mixin from "../../libs/mixin/mixin.js"
	export default {
		name: "m-number",
		mixins: [mixin],
		data() {
			return {
				units: '',
				decimals: '', //小数点后
			};
		},
		props: {
			//传入的价格
			value: {
				type: [String, Number],
				default: '0.00'
			},
			isHidden: {
				type: Boolean,
				default: false
			},
			//右侧文字
			unit:"",
			//左侧文字
			leftText: {
				type: String,
				default: ''
			},
			//是否显示小数点  默认显示0不显示
			fill: {
				type: [String, Number],
				default: 2,
			},
			//是否省略 0
			isOmit: {
				type: Boolean,
				default: true,
			},
			//千位分割
			format: {
				type: Boolean,
				default: true,
			},
			//万位分割
			qe: {
				type: Boolean,
				default: false,
			},
			//大小比例 数组形式
			size: {
				type: String,
				default: '30 26'
			},
			color: {
				type: String,
				default: ''
			},
			weight: {
				type: [String, Number],
				default: '500'
			},
			//判断时候是CNY  true默认显示￥
			cny: {
				type: Boolean,
				default: false,
			}
		},
		watch: {
			unit(val) {
				this.units = val;
			}
		},
		mounted() {
			this.units = this.unit;
		},
		computed: {
			ftSzie() {
				return this.size.split(" ").map(n => this.addUnit(n));
			},
			numberStyle() {
				return {
					...this.style,
					color: this.color,
					width: "unset",
					height: "unset",
					weight: ''
				}
			},
			numArr() {
				try {
					let arr1 = ''
					if (this.qe) {
						const { value, unit } = numberFormat(this.value, this.fill);
						return [value, unit]
					}
					//默认处理为小数
					const num = this.integer(this.value, this.fill, this.isOmit);
					arr1 = this.format ? formatMoney(num, this.fill) : arr1 = num;
					if (!this.isOmit) {
						const str = arr1.split('.')
						arr1 = str[0];
						this.decimals = str[1]
					}
					return [arr1, this.unit]
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}

			},
			p1() {
				return {
					"font-weight": this.weight,
					'font-size': this.ftSzie[0]
				}
			},
			p2() {
				return {
					// "font-weight": this.weight,
					'font-size': this.ftSzie[1] || this.ftSzie
				}
			}
		},
	}
</script>

<style lang="scss">
	.m-number {
		font-family: PingFang SC, PingFang SC;
		align-items: flex-end;
		
		text:nth-of-type(1) {
			padding-right: 5rpx;
		}
	}


</style>